<template>
  <div class="message-area-container">
    <DataForm v-on="$listeners" />
    <!-- v-on="{submit: handleSubmit"} 这种写法等效于 v-on:submit="handleSubmit" -->
    <!-- $listeners是vue的一个实例属性，它用于获取父组件传过来的所有事件函数  -->
    <!-- 这里是原封不动地将子组件的事件再向父组件传递 -->
    <!-- 这里采用这种方式能降低连续向父组件抛出事件的复杂度, 不需要每次都写事件函数 -->
    <h3>
      {{ title }}<span> {{ subTitle }}</span>
    </h3>
    <DataList :list="list" />
    <div class="loading" v-loading="isListLoading"></div>
  </div>
</template>

<script>
import DataForm from "./DataForm";
import DataList from "./DataList";
export default {
  components: {
    DataForm,
    DataList,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    subTitle: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      required: false,
      default: () => [], // 要通过这种方式来设置默认值为一个对象
    },
    isListLoading: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="less" scoped>
.loading {
  position: relative;
  height: 100px;
}
</style>
